<!--
  Generated template for the ProjectDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-navbar>
        <ion-title>
            {{project.itemName}}
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="presentPopover($event)">
                <ion-icon name="more" style="color: #fc5c53"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>


<ion-content #popoverContent fullscreen>
    <div class="pj-item">
        <div class="mile-bottom">
            <div class="item1">
                <ion-label style="margin-bottom: 3px;font-size: 10px">{{project.itemStartTime | MonthPipe}}</ion-label>
                <section class="line"></section>
                <ion-label style="margin-top: 3px;font-size: 10px">{{project.itemStartTime | YearPipe}}</ion-label>
            </div>
            <div class="item2">
                <ion-icon name="ios-arrow-dropdown-circle" style="color: #fc5c53;padding-top: 15px"></ion-icon>
                <ion-label no-padding no-margin style="margin-top: 3px;font-size: 10px;text-align: center">启动
                </ion-label>
            </div>
            <div class="item3">
                <ion-icon no-border no-margin no-padding name="md-arrow-dropleft" class="arrow-css1"></ion-icon>
                <div class="item3-1">
                    <div class="text-wrap">
                        <div class="text-left">负责人：</div>
                        <div class="text-right">{{project.itemFounder}}</div>
                        <!--<div style="clear: both"></div>-->
                    </div>
                    <div class="text-wrap">
                        <div class="text-left">交付成果：</div>
                        <div class="text-right">{{project.itemStartResult}}</div>
                        <!--<div style="clear: both"></div>-->
                    </div>
                    <div class="text-wrap">
                        <div class="text-left">紧急程度：</div>
                        <div class="text-right">{{project.itemLevel | itemlevelPipe}}</div>
                        <!--<div style="clear: both"></div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 里程碑  -->
    <div class="pj-item" *ngFor="let mile of project.milestoneVo1; let i = index">
        <div class="mile-top" id="{{mile.id}}">
            <div style="width: 1px; background-color: #ececec; height: 100%; position: absolute; left: 65px; top: 0px">

            </div>
            <div [hidden]="mile.children.length<=0">
                <div class="subtask-title" *ngIf="isExpand1[i]==false ">
                    <ion-label no-margin no-padding text-center class="horizontal-center"
                               style="line-height: 25px; font-size: 15px">{{mile.children.length+"个子任务"}}
                    </ion-label>
                </div>
                <div class="subtask-wrap" *ngIf="isExpand1[i]==true ">
                    <div class="subtask-item" *ngFor="let subtask of mile.children"
                         (click)="onClickSubtask($event, subtask, mile)">
                        <div class="subtask-css">
                            <ion-label class="subtask-left">子任务:</ion-label>
                            <ion-label class="subtask-right">{{subtask.subtaskName}}</ion-label>
                        </div>
                        <div class="subtask-css">
                            <ion-label class="subtask-left">交付时间:</ion-label>
                            <ion-label class="subtask-right">{{subtask.deliveryTime | stampToDate}}</ion-label>
                        </div>
                        <div class="subtask-css">
                            <ion-label class="subtask-left">负责人:</ion-label>
                            <ion-label class="subtask-right">{{subtask.itemEndLeader}}</ion-label>
                        </div>
                    </div>
                </div>
                <ion-icon [name]="isExpand1[i]==false?'appname-expand':'appname-fold'" class="fold"
                          (click)="onClickExpand($event, i, mile)"></ion-icon>
            </div>
        </div>
        <div class="mile-bottom">
            <div class="item1">
                <ion-label style="margin-bottom: 3px;font-size: 10px">{{mile.deliveryTime | MonthPipe}}</ion-label>
                <section class="line"></section>
                <ion-label style="margin-top: 3px;font-size: 10px">{{mile.deliveryTime | YearPipe}}</ion-label>
            </div>
            <div class="item2">
                <!--<div style="width: 1px; background-color: #ececec; height: 10px; position: absolute; left: 20px; top: 0px" ></div>-->
                <ion-label no-padding no-margin class="label-radius">{{mile.itemProgress}}</ion-label>
                <ion-label no-padding no-margin class="mile-number">{{"里程碑"+(i+1)}}</ion-label>
                <ion-label no-padding no-margin class="delay-radius1" [hidden]="mile.delayDays==0">
                    {{"延"+mile.delayDays}}
                </ion-label>
            </div>
            <!--[ngClass]="{'arrow-css1':mile.type==0,'arrow-css2':mile.type==1,'arrow-css3':mile.type==2}"-->

            <div class="item3">
                <ion-icon no-border no-padding no-margin name="md-arrow-dropleft" class="arrow-css2"></ion-icon>
                <div class="item3-2" (click)="onClickMilestone($event, mile)">
                    <div class="text-wrap">
                        <div class="text-left">负责人：</div>
                        <div class="text-right">{{mile.itemEndLeader}}</div>
                    </div>
                    <div class="text-wrap">
                        <div class="text-left">交付成果：</div>
                        <div class="text-right">{{mile.deliveryResult}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目结束 -->
    <div class="mile-bottom" (click)="onProjectNormalEnd($event)">
        <div class="item1">
            <ion-label style="margin-bottom: 3px;font-size: 10px">{{project.endTime | MonthPipe}}</ion-label>
            <section class="line"></section>
            <ion-label style="margin-top: 3px;font-size: 10px">{{project.endTime | YearPipe}}</ion-label>
        </div>
        <div class="item2">
            <!--<div style="width: 1px; background-color: #ececec; height: 10px; position: absolute; left: 20px; top: 0px" ></div>-->
            <ion-icon name="ios-arrow-dropup-circle" style="color: #fc5c53;padding-top: 15px"></ion-icon>
            <ion-label no-padding no-margin style="margin-top: 3px;font-size: 10px;text-align: center">结束</ion-label>
        </div>
        <div class="item3">
            <ion-icon no-border no-padding no-margin name="md-arrow-dropleft" class="arrow-css1"></ion-icon>
            <div class="item3-1">
                <div class="text-wrap">
                    <div no-padding no-margin class="text-left">负责人：</div>
                    <div no-padding no-margin class="text-right">{{project.itemEndLeader}}</div>
                </div>
                <div class="text-wrap">
                    <div no-padding no-margin class="text-left">交付成果：</div>
                    <div no-padding no-margin class="text-right">{{project.itemEndResult}}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 延期里程碑 -->
    <!--<div class="mile-bottom" style="margin-top: 5px"-->
    <!--*ngFor="let dalayMile of project.milestoneVo2; let i = index">-->
    <!--<div class="item1">-->
    <!--<ion-label style="margin-bottom: 3px;font-size: 10px">{{dalayMile.deliveryTime | MonthPipe}}</ion-label>-->
    <!--<section class="line"></section>-->
    <!--<ion-label style="margin-top: 3px;font-size: 10px">{{dalayMile.deliveryTime | YearPipe}}</ion-label>-->
    <!--</div>-->
    <!--<div class="item2">-->
    <!--&lt;!&ndash;<div style="width: 1px; background-color: #ececec; height: 10px; position: absolute; left: 20px; top: 0px" ></div>&ndash;&gt;-->
    <!--<ion-label no-padding no-margin class="label-radius">{{dalayMile.itemProgress}}</ion-label>-->
    <!--<ion-label no-padding no-margin class="mile-number">{{"延期"+(i+1)}}</ion-label>-->
    <!--<ion-label no-padding no-margin class="delay-radius1" [hidden]="dalayMile.delayDays==0">-->
    <!--{{"延"+dalayMile.delayDays}}-->
    <!--</ion-label>-->
    <!--</div>-->

    <!--<div class="item3">-->
    <!--<ion-icon no-border no-padding no-margin name="md-arrow-dropleft" class="arrow-css3"></ion-icon>-->
    <!--<div class="item3-3" (click)="onClickMilestone($event, dalayMile)">-->
    <!--<div class="text-wrap">-->
    <!--<div class="text-left">负责人：</div>-->
    <!--<div class="text-right">{{dalayMile.itemEndLeader}}</div>-->
    <!--</div>-->
    <!--<div class="text-wrap">-->
    <!--<div class="text-left">交付成果：</div>-->
    <!--<div class="text-right">{{dalayMile.deliveryResult}}</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->

    <div class="pj-item" *ngFor="let dalayMile of project.milestoneVo2; let i = index">
        <div class="mile-top" id="{{dalayMile.id}}">
            <div style="width: 1px; background-color: #ececec; height: 100%; position: absolute; left: 65px; top: 0px">

            </div>
            <div [hidden]="dalayMile.children.length<=0">
                <div class="subtask-title" *ngIf="isExpand2[i]==false ">
                    <ion-label no-margin no-padding text-center class="horizontal-center"
                               style="line-height: 25px; font-size: 15px">{{dalayMile.children.length+"个子任务"}}
                    </ion-label>
                </div>
                <div class="subtask-wrap" *ngIf="isExpand2[i]==true ">
                    <div class="subtask-item" *ngFor="let subtask of dalayMile.children"
                         (click)="onClickSubtask($event, subtask, dalayMile)">
                        <div class="subtask-css">
                            <ion-label class="subtask-left">子任务:</ion-label>
                            <ion-label class="subtask-right">{{subtask.subtaskName}}</ion-label>
                        </div>
                        <div class="subtask-css">
                            <ion-label class="subtask-left">交付时间:</ion-label>
                            <ion-label class="subtask-right">{{subtask.deliveryTime | stampToDate}}</ion-label>
                        </div>
                        <div class="subtask-css">
                            <ion-label class="subtask-left">负责人:</ion-label>
                            <ion-label class="subtask-right">{{subtask.itemEndLeader}}</ion-label>
                        </div>
                    </div>
                </div>
                <ion-icon [name]="isExpand2[i]==false?'appname-expand':'appname-fold'" class="fold"
                          (click)="onClickExpand($event, i, dalayMile)"></ion-icon>
            </div>
        </div>
        <div class="mile-bottom">
            <div class="item1">
                <ion-label style="margin-bottom: 3px;font-size: 10px">{{dalayMile.deliveryTime | MonthPipe}}</ion-label>
                <section class="line"></section>
                <ion-label style="margin-top: 3px;font-size: 10px">{{dalayMile.deliveryTime | YearPipe}}</ion-label>
            </div>
            <div class="item2">
                <!--<div style="width: 1px; background-color: #ececec; height: 10px; position: absolute; left: 20px; top: 0px" ></div>-->
                <ion-label no-padding no-margin class="label-radius">{{dalayMile.itemProgress}}</ion-label>
                <ion-label no-padding no-margin class="mile-number" style="color: #fc780e">{{"延期"+(i+1)}}</ion-label>
                <ion-label no-padding no-margin class="delay-radius1" [hidden]="dalayMile.delayDays==0">
                    {{"延"+dalayMile.delayDays}}
                </ion-label>
            </div>
            <div class="item3">
                <ion-icon no-border no-padding no-margin name="md-arrow-dropleft" class="arrow-css3"></ion-icon>
                <div class="item3-3" (click)="onClickMilestone($event, dalayMile)">
                    <div class="text-wrap">
                        <div class="text-left">负责人：</div>
                        <div class="text-right">{{dalayMile.itemEndLeader}}</div>
                    </div>
                    <div class="text-wrap">
                        <div class="text-left">交付成果：</div>
                        <div class="text-right">{{dalayMile.deliveryResult}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--[ngStyle]="{'bottom':isShowShare==false?'-200px':'0px'}"-->
    <div id="shareView" class="share-css">
        <ion-label text-center>分享到</ion-label>
        <ion-row style="height: 100px;@extend .vertical-middle;">
            <ion-col text-center>
                <ion-icon name="appname-dingding"></ion-icon>
            </ion-col>
            <ion-col text-center>
                <ion-icon name="appname-qq"></ion-icon>
            </ion-col>
            <ion-col text-center>
                <ion-icon name="appname-weixin"></ion-icon>
            </ion-col>
        </ion-row>
        <button ion-button no-padding no-margin
                style="width: 100%; height: 50px; border-top: solid 1px #ececec; background-color: white; color: black"
                (click)="onCancelShare($event)">取消
        </button>
    </div>
</ion-content>
